<template>
  <div v-scroll class="one-piece">
    <!-- <img :src="img" class="bg"/> -->
    <!-- <div class="bg" :style="`background: url(${img}) no-repeat top center / cover`"></div> -->
    <div v-for="(item, index) in bg.default"
         :key="index"
         class="bg"
         :style="`background: url(${item}) no-repeat center center / cover`"></div>
    <div class="sticky">
      <div class="Sanji" @click="$router.push('/atlas')">
        <div class="title"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as bg from '@/assets/img/bg/index.js'
export default {
  name: 'OnePiece',
  components: {
  },
  data () {
    return {
      bg: bg,
      img: bg.default['img'+Math.round(Math.random()*(Object.keys(bg.default).length - 1) + 1)],
    }
  },
  mounted () {
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
.one-piece {
  // height: 300px;
  // width: 500px;
  // resize: both;
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  overflow-y: auto;
  & > .bg {
    flex: 1 0 auto;
    // height: 100%;
    height: 100vh;
  }
  & > .sticky {
    position: sticky;
    bottom: 0;
    & > .Sanji {
      cursor: pointer;
      position: absolute;
      right: 0;
      bottom: 0;
      width: 352px;
      height: 200px;
      background: url('~@/assets/img/Sanji.png') no-repeat left center;
      background-size: contain;
      transition: all .5s;
      border-radius: 100px;
      & > .title {
        position: absolute;
        right: 0;
        bottom: 20px;
        margin: 0 auto;
        width: 300px;
        height: 80px;
        text-align: center;
        cursor: pointer;
        opacity: 0;
        transition: all .5s;
        &::after {
          content: '恶魔果实图鉴';
          display: inline-block;
          line-height: 80px;
          font-size: 30px;
          color: #fff;
          font-weight: 700;
        }
      }
      &:hover {
        height: 80vh;
        width: 140vh;
        // height: 100vh;
        // width: 176vh;
        border-radius: 50vh;
        & > .title {
          right: calc(70vh - 150px);
          opacity: 1;
          border-radius: 40px;
					border: 4px solid transparent;
					background-image: linear-gradient(to top, #cc4a3d, #eb9138),
						linear-gradient(to top, #eb9138, #fff, #cc4a3d);
					background-origin: border-box;
					background-clip: content-box, border-box;
        }
      }
    }
  }
}
</style>
